<template>
	<section class="container category">
		<no-data v-if="isNoData"></no-data>
	    <ul class="category_list" v-else>
	    	<li @click="gotoList(classify)" v-for="(classify,cIndex) in classifyList" :key="cIndex">
				<p class="txt"><span>{{classify.name}}</span></p>
				<img :src="classify.imageUrl" v-if="baseUtil.isNotBlank(classify.imageUrl)"/>
				<img src="../../assets/images/categoryimg.jpg" v-else/>
			</li>
	    </ul>
	</section>
</template>
<script >
	import { Icon, Toast } from 'vant'
	import {getCategoryList} from '../../api/book'
	import noData from './noData'

export default {
	components: {
		[Icon.name]: Icon,
		[Toast.name]: Toast,
        noData,
	},
	data() {
		return {
            classifyList:[],
			isNoData:false,
		}
	},
	methods: {
		gotoList(classify) {
            if(classify.linkType == 1){   //分类
                this.$router.push({name: 'BookList',query:{bookCategoryId:classify.bookCategoryId,title:classify.name}});
            }
            if(classify.linkType == 2){    //外链
                window.location.href = classify.linkUrl;
            }
		},
		async init(){
		    let resp = await getCategoryList();
		    if(this.qUtil.validResp(resp)){
		        if(resp.data.total <=0){
		            this.isNoData = true;
		            return false;
				}
		        this.classifyList = resp.data.templateClassifyList;
			}
		}
	},
	mounted(){
	    this.init();
	}

}</script>
<style scoped>
.category {
	background: #fff; 
	min-height: 100%;
}
.category_list {
	padding: 1rem 0.5rem;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 4rem;
	background: #fff; 
}

.category_list li {
	width: 30.3%;
	margin: 0 1.5% 0.8rem 1.5%;
	height: 100%;
	overflow: hidden;
	position: relative;
	text-align: center;
	border-radius: 0.4rem;
	background: #000;
}

.category_list li .txt {
	width: 100%;
	height: 100%;
	color: #fff;
	position: absolute;
	z-index: 10;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}

.category_list li .txt span {
	letter-spacing: 0.1rem;
	line-height: 1rem;
	font-size: 1rem;
}

.category_list li img {
	width: 100%;
	display: block;
	opacity: 0.6;
}</style>